<template>
  <div>
    <li @mouseenter="handlerEnter(true)" @mouseleave="handlerEnter(false)" :style="{background: bgColor}">
      <label>
        <input type="checkbox" v-model="todo.complete"/>
        <span>{{todo.name}}</span>
      </label>
      <button class="btn btn-danger" v-show="isShowButton" @click="delToDo(index)">删除</button>
    </li>
  </div>
</template>

<script>
  import {mapActions} from "vuex";

  export default {
    name: "todo-item",
    props: { //接受父组件传递过来的数据
      todo: Object,
      index: Number
    },
    data(){
      return {
        isShowButton: false, //是否显示删除按钮，默认不显示
        bgColor: 'white'
      }
    },
    methods: {
      //删除todo
      // delToDo: function (index) {
      //   // this.todos.splice(index, 1);
      //   //触发actions
      //   this.$store.dispatch('delToDo', index)
      // }

      ...mapActions(['delToDo']),

      handlerEnter: function (isEnter) {
        //进入为true,不进入false
        if (isEnter) {
          this.isShowButton = true;
          this.bgColor = '#aaa'
        } else {
          this.isShowButton = false;
          this.bgColor = '#fff'
        }
      }
    }
  }
</script>

<style scoped>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }

  li label {
    /*float: left;*/
    cursor: pointer;
  }

  li label input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }

  li label span {
    color: black;
    font-weight: normal;
  }

  li button {
    float: right;
    /*margin-top: 3px;*/
  }

  li:before {
    content: initial;
  }

  li:last-child {
    border-bottom: none;
  }
</style>
